<template>
	<view>
		<view class="media-container">
			<jade-image-upload  :list="media" :control="control" :columnType="columnType" :maxCount="maxCount" :maxListShowCount="maxListShowCount"
				:compressSize="compressSize" :compressQuality="compressQuality" :compressWidth='compressWidth'
				:imageSize="imageSize" :sourceType="sourceType" @chooseFile="chooseFile" @imgDelete="mediaDelete">
			</jade-image-upload>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//上传图片相关变量
				control: true,
				columnType: 'other',
				maxCount: 20,
				compressSize: 30,
				imageSize: 30,
				compressQuality: 0.8,
				compressWidth: 375,
				sourceType: ['album'],
				maxListShowCount: 20,
				
				imageID: 0,
				uploadTask: null,
				media: [], //数据源
				
				cover_url: []
			}
		},
		
		onLoad: function(option) {
		
		
		  const eventChannel = this.getOpenerEventChannel();
		  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		  var that = this
		  eventChannel.on('acceptDataFromOpenerPage', function(data) {
			console.log("<<<<<<<<<<<<<<" + JSON.stringify(data))
			that.media = data.media
			if(data.cover){
				that.cover_url = data.cover
			}
		  })
		},
		
		onBackPress() {
			
			const eventChannel = this.getOpenerEventChannel();
			let data = {
				"media": this.media,
				"cover": this.cover_url,
			}
			
			eventChannel.emit('acceptDataFromOpenedPage', data);
			
		},
		
		methods: {
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.cover_url.splice(e, 1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				urlList.forEach((item) => {
					var that = this
					this.uploadTask = uni.uploadFile({
						url: 'https://api.cst365.top/V1/common/uploadPictures',
						filePath: item.src,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (!data.data.url) {
								item.status = 'error'
								item.progress = '上传失败'
							} else {
								item.status = 'success'
								item.progress = '上传成功'
								this.$utils.log("打印选择的item itemitemitemitem " + JSON.stringify(item))
								this.$utils.log("打印选择的resresresres  " + JSON.stringify(res))
								item.src = data.data.url
								item.path = data.data.path
								var str = JSON.stringify(item);
								const jsonObj = JSON.parse(str.replace(/\\\\\\\\/g, '\\'))
								
								this.$utils.log("打印选择的item" + JSON.stringify(jsonObj))
								this.$utils.log("打印选择的item   cover_urlcover_urlcover_url " + JSON.stringify(that.cover_url))
								that.cover_url.push(jsonObj.path)
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) => {
						item.percent = res.progress
						this.media.splice(item.index, 1, item)
					})
				})
			},
		}
	}
</script>

<style>
	.media-container {
		padding: 20rpx 26rpx;
		box-sizing: border-box;
	}
	
</style>
